<template>
  <view class="home u-p-20">
    <!-- <view class="home-search u-flex">
      <view class="search u-flex-1 u-m-r-20">
        <u-search bg-color="#e8e9eb" placeholder="查公司、律师、案例、老板等" :show-action="false" disabled height="56" placeholder-color="#999"></u-search>
      </view>
      <u-icon name="bell" size="48" color="#666"></u-icon>
    </view> -->
    <view class="home-nav u-m-b-30 u-flex u-flex-wrap u-row-between">
      <navigator url="/pages/subpackages/task/task" open-type="navigate" hover-class="none" :style="'background-image:url(https://lzj.shandongweipai.com/uploads/20220223/77a9603d35c75e1d8a553be83eb00a1c.png);'"
        class="item u-p-20 active">
        <view class="name">任务大厅</view>
        <view class="subname">用户需求发布</view>
      </navigator>
      <div class="item active">
        <navigator :url="item.url" open-type="navigate" hover-class="none" v-for="(item, index) in navList1" :key="index" :style="'background-image:url(' + item.image + ');'" class="column u-p-20">
          <view class="name">{{item.name || ""}}</view>
          <view class="subname">{{item.subname || ""}}</view>
        </navigator>
      </div>
      <navigator :url="item.url" open-type="navigate" hover-class="none" v-for="(item, index) in navList2" :key="index" :style="'background-image:url(' + item.image + ');'" class="item column u-p-20">
        <view class="name">{{item.name || ""}}</view>
        <view class="subname">{{item.subname || ""}}</view>
      </navigator>
    </view>
    <view class="home-usually">
      <view class="title u-m-b-20 u-font-24">常用功能</view>
      <view class="list u-flex">
        <navigator :url="item.url" open-type="navigate" hover-class="none" v-for="(item, index) in usuallyList" :key="index" class="item u-flex-1 u-flex-col u-col-center u-row-center">
          <u-image class="image" :src="item.image" mode="aspectFill" width="72" height="72"></u-image>
          <view class="name u-m-t-12 u-font-26">{{item.name || ""}}</view>
        </navigator>
      </view>
    </view>
    <view class="home-ad u-m-t-20 u-flex u-row-between">
      <view class="left u-flex-1">
        <view class="name u-m-b-12 u-font-36">平台公告</view>
        <notice-scroll :noticeList="noticeList" :lineHeight="50" :animationScroll="3000" :animation="3000"></notice-scroll>
      </view>
      <view class="image u-m-t-20">
        <u-image src="/static/img/home-ad.png" mode="aspectFill" width="256" height="199"></u-image>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <com-link-nav :status="false" iconName="home" title="用户端"></com-link-nav>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  name: "server-home",
  data() {
    return {};
  },
  props: {
    // 导航
    navList: {
      type: Array,
      default: () => [],
    },
    // 导航
    navList1: {
      type: Array,
      default: () => [],
    },
    // 导航
    navList2: {
      type: Array,
      default: () => [],
    },
    // 常用功能
    usuallyList: {
      type: Array,
      default: () => [],
    },
    // 公告
    noticeList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  /* #ifdef H5 */
  min-height: calc(100vh - 94px);
  /* #endif */
  background-color: $uni-bg-color-grey;

  &-nav {
    .item {
      flex: 0 0 49%;
      width: 49%;
      background-size: cover;
      background-position: center;

      &.active {
        height: 324rpx;
        border-radius: 10rpx;
        overflow: hidden;
      }
    }

    .column {
      height: 155rpx;
      background-size: cover;
      background-position: center;
      border-radius: 10rpx;

      &:nth-child(n + 2) {
        margin: 15rpx 0 0;
      }
    }

    .name {
      font-size: 42rpx;
      color: $uni-text-color-inverse;
    }

    .subname {
      margin: 6rpx 0 0;
      font-size: 22rpx;
      color: #c7ccd6;
    }
  }

  &-usually {
    padding: 20rpx 0;
    background-color: $uni-bg-color;
    box-shadow: 0 0 5px $uni-border-color;
    border-radius: 10rpx;

    .title {
      padding: 0 20rpx;
      color: $uni-text-color-grey;
    }
  }

  &-ad {
    padding: 0 20rpx;
    background-color: $uni-bg-color;
    box-shadow: 0 0 5px $uni-border-color;
    border-radius: 10rpx;

    .name {
      letter-spacing: 3px;
    }

    .text {
      color: $uni-text-color-grey;

      &:nth-child(n + 2) {
        margin-left: 12rpx;
      }
    }
  }
}
</style>
